// pages/home/home-nav/medical-condition/bpm-control/bpm-chart2/bpm-chart2.ts
// @ts-ignore
import * as echarts from '../../../../../../components/ec-canvas/echarts';
import { initEcharts } from '../../../../../../utils/util';

var option = {
  grid: {
    left: '0',
    right: '0',
    top: '10%',
    bottom: '10%',
  },
  tooltip: {
    trigger: 'item',
    formatter: '{b}: {c}    {d}%',
  },
  legend: {
    orient: 'vertical',
    left: '65%',
    top: 'center',
    formatter(name) {
      const data = option.series[0].data;
      const item = data.find(item => item.name === name);
      if (item) {
        const total = data.reduce((sum, item) => sum + item.value, 0);
        const percent = ((item.value / total) * 100).toFixed(2);
        return `${name}: ${item.value} ${percent}%`;
      }
      return name;
    },
  },
  series: [
    {
      type: 'pie',
      data: [],
      radius: ['65%', '80%'],
      label: {
        show: false,
      },
    },
  ],
};

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    ec: {
      lazyLoad: true,
    },
    diseasestype: {
      QD: 1,
      ZCGZ: 1,
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeChart() {
      const canvasComponent = this.selectComponent("#bpm-chart2");
      const diseasesData = {
        data: [
          {
            value: this.data.diseasestype.QD,
            name: '过急',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#D95040' },
                { offset: 1, color: '#FF7F50' },
              ]),
            },
          },
          {
            value: this.data.diseasestype.ZCGZ,
            name: '过缓',
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                { offset: 0, color: '#EE752F' },
                { offset: 1, color: '#FFA07A' },
              ]),
            },
          },
        ]
      };
      const options = this.changeOptionsData(diseasesData);
      initEcharts(options, canvasComponent);
    },
    changeOptionsData(initData: any) {
      option.series[0].data = initData.data;
      return option;
    }
  },
  /*
  * 组件所在页面的生命周期
  */
  pageLifetimes: {
    show: function () {
      this.changeChart();
    },
  },
  /*
  * 组件自己的生命周期
  */
  lifetimes: {
    attached: function () {
      this.changeChart();
    }
  }
});
